<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title>IAM Authentication</title>
	<link rel="stylesheet" href="./static/css/login.css">
	<link rel="stylesheet" href="./static/css/lanren.css">
	<link rel="shortcut icon" href="./favicon.ico">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="./static/js/iam-1.2.1.js"></script>
	<script src="./static/js/login.js"></script>
</head>

<body>
	<div id="wrap" style="background:url('./static/images/bg_icon/background.png') no-repeat;background-size: cover;">
		<div id="top">
			<img id="img_logo" src="./static/images/bg_icon/logo.png" />
		</div>
		<div id="content">
			<div id="content-left" class="lanren">
				<ul>
					<li><img src="./static/images/roll/ai1.png"> </li>
					<li><img src="./static/images/roll/ai2.png"> </li>
					<li><img src="./static/images/roll/ai3.png"> </li>
				</ul>
				<ul>
					<li><img src="./static/images/roll/wulianwang1.png"> </li>
					<li><img src="./static/images/roll/wulianwang2.png"> </li>
					<li><img src="./static/images/roll/wulianwang3.png"> </li>
				</ul>
				<ul>
					<li><img src="./static/images/roll/nengyuan1.png"> </li>
					<li><img src="./static/images/roll/nengyuan2.png"> </li>
					<li><img src="./static/images/roll/nengyuan3.png"> </li>
				</ul>
				<div class="base">
					<img src="./static/images/roll/base.png" alt="图片">
				</div>
				<div class="cloud">
					<img src="./static/images/roll/yun.png" alt="图片">
				</div>
				<div class="shadow">
					<img src="./static/images/roll/yunyinyin.png" alt="图片">
				</div>
				<div class="light">
					<img src="./static/images/roll/guangzhu.png" alt="图片">
				</div>
			</div>
			<div id="content-right">
				<div id="con-top">
					<span id="passwordGo" class="active">账号登录</span>
					<span class="cut-line">|</span>
					<span id="phoneGo">手机登录</span>
					<span class="cut-line">|</span>
					<span id="codeGo">扫码登录</span>
				</div>
				<div id="err_tip"></div>
				<div id="login_scan_pass">
					<form action="#">
						<div>
							<i class="icon-user"></i>
							<input id="user_name" class="text1" name="username" placeholder="请输入账号"
								style="color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
								maxlength=40>
						</div>
						<div class="pass-word">
							<i class="icon-pass"></i>
							<input placeholder="请输入密码" id="password" class="text1 text2"
								style="color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
								name="password" type="password" maxlength=30>
						</div>
						<div id="captcha_panel">
							<i class="icon-code"></i>
							<input id="captcha_input" class="text4" name="captcha" maxlength=5
								style="border:1px solid #dad2d2;padding-left:20px;border-radius:2px 2px 2px 2px;">
							<img id="codeimg" name="codeimg" border=0
								style="padding:0 0 5px 0;position:relative;top:18px;margin-left:5px;width:100px;height:35px;cursor:pointer;"
								title="看不清可单击图片刷新">
						</div>
						<br />
						<input id="iam_submit" type="button" style="cursor:pointer;" value="登录"><br /><br /><br />
						<div style="position:relative;margin-top:-30px;left:18px;display: none">
							<span
								style="text-decoration: line-through;margin-left: 40px;color: #efefef;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<span class="con-foot">手机号登录</span>
							<span
								style="text-decoration: line-through;color: #efefef;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
						</div>
						<div style="margin-top:15px;margin-left:10px;display: none">
							<img id="wechat" style="cursor:pointer;margin-left:70px;" src="./static/images/bg_icon/wx.png"
								style="margin-left: 65px;">
							<img id="qq" style="cursor:pointer;margin-left:48px;" src="./static/images/bg_icon/qq.png"
								style="margin-left: 50px;">
							<img id="sina" style="cursor:pointer;margin-left:52px;" src="./static/images/bg_icon/sina.png"
								style="margin-left: 50px;">
						</div>
					</form>
				</div>
				<div id="login_scan_panel">
					<div id="content-left1">
						<div id="qrcode_show" style="height:255px;">
						</div>
					</div>
					<div style="text-align: center;color: #4e619c;">打开&nbsp;&nbsp;<b
							style="color: #fff;">微信’扫一扫’</b>&nbsp;&nbsp;扫描二维码</div>
				</div>
				<div id="login_phone">
					<!-- <form action="#"> -->
					<div>
						<i class="icon-phone"></i>
						<select class="select-area">
							<option value="+086">大陆+086</option>
							<option value="+852">香港+852</option>
							<option value="+853">澳门+853</option>
							<option value="+084">越南+084</option>
							<!-- <option value="+092">巴基斯坦+092</option> -->
							<!-- <option value="+065">新加坡+065</option> -->
							<option value="+358">法国+358</option>
							<option value="+066">泰国+066</option>
						</select>
						<!-- <input id="user_phone" class="text1" name="phone" placeholder="请输入手机号"
								style="box-sizing:border-box;width:240px;color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:125px;border-radius:2px 2px 2px 2px;"
								maxlength=40> -->
						<input id="user_phone" class="text1" name="phone" placeholder="请输入手机号"
							style="box-sizing:border-box;width:240px;color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:125px;border-radius:2px 2px 2px 2px;"
							maxlength="11" onkeypress="return event.keyCode>=48&amp;&amp;event.keyCode<=57"
							onkeyup="value=value.replace(/[^\d]/g,'') " ng-pattern="/[^a-zA-Z]/">
					</div>
					<p class="err-info phone-err">请输入正确的手机号</p>
					<div class="pass-word code-number">
						<i class="icon-codeNumber"></i>
						<input placeholder="请输入短信动态码" id="codeNumber" class="text1 text2"
							style="box-sizing:border-box;width:240px;color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
							name="codeNumber" type="text" maxlength=30>
						<button type="button" id="code-get">获取</button>
					</div>
					<p class="err-info pass-err">请输入短信验证码</p>
					<br>
					<input id="phone_submit" type="button" style="cursor:pointer;" value="登录">
					<!-- </form> -->
					<div id="code-write" class="code-write">
						<p>
							<span class="err-tip"></span>
							<span class="code-close">x</span>
						</p>
						<p>
							<span>图文验证码</span>
						</p>
						<div style="margin: 10px 10px 0 10px;">
							<i class="icon-codecode"></i>
							<input id="user_code" class="text1" name="code" placeholder="请输入验证码"
								style="width:100px;color: #fff;border: 1px solid #80c1fb;background:#253667;padding-left:40px;border-radius:2px 2px 2px 2px;"
								maxlength=40>
							<img class="code-image" src=""  alt="图片">
						</div>
						<br>
						<div style="text-align: center">
							<input id="code_submit" type="button" style="cursor:pointer;width:90%;" value="确定">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="foot" style="line-height:24px; position:relative;">
			<div>Copyright © 2016 - 2020 XXXX科技有限公司· XXX云平台 ● 京ICP备xxxxx号-1</div>
			<!--<div style="position:absolute;width:120px;top:-25px;right:10%">关注我们<img src="static/qrcode2.png"></div> -->
		</div>
		<!-- <div class="main-right">
			<div class="rightimageBox">
				<div id="qrcode-title">微信扫码关注</div>
				<img class="rightImage" src="static/qrcode-safecloud-mp.jpg">
			</div>
		</div> -->
	</div>
	<div class="gb_box"></div>
	<script type="text/javascript" src="./static/js/tech-anima.js" opacity=0.6></script>
	<script type="text/javascript">
		// IAM认证服务based URI
		//var iamBaseURI = "http://passport.anjiancloud.test/sso";
		//var iamBaseURI = "http://passport.wl4g.com/sso";
		var iamBaseURI = "http://localhost:14040/iam-server";

		// 引用IAM SDK插件，处理SNS授权操作
		(function () {
			window.IAM.config({
				baseUri: iamBaseURI, // IAM认证服务接口的基础URI
				// 定义获取账号名函数
				getPrincipal: function () { // 必填，获取填写的登录用户名
					return document.getElementById("user_name").value;
				},
				getCredential: function () { // 可选，获取填写的登录用户密码，which=which_login时必填
					return document.getElementById("password").value;
				},
				// 登录认证配置
				signIn: {
					submission: document.getElementById("iam_submit"), // 登录提交点击对象（支持非表单提交）
					// 定义验证码显示面板配置
					captcha: {
						img: document.getElementById("codeimg"), // 验证码显示IMG对象
						input: document.getElementById("captcha_input"), // 验证码INPUT输入对象
						enableOption: "captchaEnable", // 可选，控制当前是否启用验证码，默认:captchaEnable（与后台对应）
						name: "captcha", // 必须，提交时的验证码参数名，默认:captcha（与后台对应）
						onFallback: function (errmsg) { // 验证码刷新降级处理（被锁定）
							console.warn(errmsg);
							// 加载默认破图
							document.getElementById("codeimg").src = "./static/images/bg_icon/broken.png";
							//禁止输入验证码
							$('#captcha_input').attr('disabled', true);
							$('#captcha_input').css('cursor', 'no-drop');
						}
					},
					// 提交之前
					onSubmissionBefore: function (principal, plainPasswd, captcha) {
						//console.log("准备提交登录....");
						return true;
					},
					onSuccess: function (principal, redirectUrl) {
						//console.log("登录成功!");
						return true; // 返回false会阻止自动调整
					},
					onError: function (errmsg) {
						// console.error("登录失败. " + errmsg);
						errTips(); // 加载err_tip
					}
				},
				// SNS授权配置
				sns: {
					// 定义必须的请求参数
					required: {
						which: function () { // 执行操作类型，必须：当使用登录功能时值填"login",当使用绑定功能时值填"bind"
							return "login";
						},
						//refreshUrl: "" // SNS回调后重定向刷新的URL，可选，which=login时传空
					},
					// 定义内嵌授权页面配置
					qrcodePanel: {
						src: document.getElementById("qrcode_show"),
						width: "250",
						height: "260"
					},
					// 定义新开的TAB授权页的配置
					pagePanel: {
						"width": "800px",
						"height": "500px",
						"left": "250px",
						"top": "100px"
					},
					// 定义支持的社交网络服务商配置
					provider: {
						// "qq": { // 服务商名(需与后台对应, 可选：qq/wechat/sina/github/google/dingtalk/twitter/facebook等)
						// 	panelType: "pagePanel", // 使用新开TAB页的方式渲染授权页面
						// 	src: document.getElementById("qq") // 绑定QQ授权点击事件源
						// },
						"wechat": { // 服务商名(需与后台对应, 可选：qq/wechat/sina/github/google/dingtalk/twitter/facebook等)
							panelType: "qrcodePanel", // 使用内嵌的方式渲染扫码授权页面
							src: document.getElementById("codeGo") // 绑定Wechat授权点击事件源
						}
					},
					// 点击SNS服务商授权请求之前回调事件
					onBefore: function (provider, panelType) {
						if (provider == 'wechat') { // 只有微信等扫码登录时，才切换tab
							changeTab('login_scan_panel', 'login_scan_pass');
						}
						// 执行后续逻辑，返回false会阻止继续
						return true;
					}
				}
			}).snsAuth().generalAuth();
		})();
	</script>
	<script type="text/javascript">
		// 监听panelType为pagePanel类型的SNS授权回调
		(function () {
			window.onmessage = function (e) {
				window.location.href = JSON.parse(e.data).refresh_url;
			}
		})();
	</script>
	<script type="text/javascript">
		// 因SNS授权（如:WeChat）只能刷新页面，因此授权错误消息只能从IAM服务加载
		function errTips() {
			var url = iamBaseURI + "/ext/errread";
			$.ajax({
				url: url,
				success: function (res) {
					//console.log(res);
					var errmsg = res.data["errorTipsInfo"];
					if (errmsg != null && errmsg.length > 0) {
						$("#err_tip").text(errmsg).show().delay(8000).hide(100);
					}
				}
			});
		};
		errTips();
	</script>
</body>

</html>